<template>
	<uni-search-bar :style="{backgroundColor:bgcolor}" @confirm="search" cancel-button="none" :focus="true"
		v-model="searchValue">
	</uni-search-bar>
	<view class="catogory">
		<scroll-view class="scroll-view_H" scroll-x="true" @scroll="scroll" :show-scrollbar="true">
      <template v-for="(item,index) in dataList" :key="index">
        <view class="scroll-view-item_H" @click="onChange(index)" :class="{ 'highlighted': item === tagState }">
          {{ item.catName }}
        </view>
      </template>
		</scroll-view>

		<uni-icons :type="type" class="more"></uni-icons>
	</view>

</template>

<script>
	import {articleCatAll} from "@/http";

  export default {
		data() {
			return {
				searchValue: '',
				bgcolor: '#0883D8',
				frontColor: '#ffffff',
				type: 'bottom',
        dataList:[],
        tagState:null,
        isOne:true
			}
		},
		onLoad() {
      this.loadData()
			uni.setNavigationBarColor({
				backgroundColor: this.bgcolor,
				frontColor: this.fontColor
			})
		},
    onShow() {
      if (this.dataList.length===0&&this.isOne){
        this.loadData()
      }
    },
    onHide() {
      this.$data.isOne=false;
    },
		methods: {
			search(e) {
				console.log(e)
			},
			scroll(e) {
				// console.log(e)
			},
      loadData(){
        articleCatAll().then(res=>{
          this.$data.dataList=res.data.articleCats;
        })
      },
      onChange (index) {
        this.tagState = this.dataList[index]; // 保存被选中的项
      }
		},
	}
</script>

<style>
	.catogory {
		position: relative;

	}

	.scroll-view_H {
		white-space: nowrap;
		width: 100%;
		height: 60rpx;
		border-bottom: 1upx solid #ccc;
	}
	/deep/::-webkit-scrollbar{
		display: none;
		width: 0;
		height: 0;
	}

  .highlighted{
    color: #f8f8f8 ;
    background-color: #0883D8;
  }
	.scroll-view-item_H {
		display: inline-block;
		width: 100upx;
		line-height: 60rpx;
		text-align: center;
		font-size: 20rpx;
	}

	.more {
		position: absolute;
		top: 10upx;
		right: 0;
		background-color: #f5f5f5;
	}
</style>